<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" checked="false" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    var data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: false,
        collect: true
      },
      {
        id: 1,
        title: "兄弟 - 艾热",
        checked: false,
        collect: false
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: false,
        collect: true
      }, {
        id: 3,
        title: "公子向北走 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: false,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }

    ];
    function renderDOM(data) {
      var list = document.querySelector("#list")
      list.innerHTML = ""
      data.forEach(function (item) {
        var getli = document.createElement("li")
        getli.innerHTML = `<input type="checkbox" ${item.checked ? 'checked' : ''}/>
        <span>${item.title}</span>
        ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
          <a href="javascript:;" class="remove">删除</a>`
        list.appendChild(getli)
      })
      add()
    }
    renderDOM(data)
    function add() {
      var ul = document.getElementById("list")
      var li = document.querySelectorAll("#list li")
      li.forEach(function (item, key) {
        item.onclick = function (event) {
          var e = event || window.event
          var target = e.target || src.srcElement
          if (target.className == "cancelCollect") {
            data[key].collect = false
            renderDOM(data)
          }
          if (target.className == "collect") {
            data[key].collect = true
            renderDOM(data)
          }
          if (target.className == "remove") {
            data.splice(key, 1)
            renderDOM(data)
          }
          if (target.nodeName == "INPUT") {
            data[key].checked = target.checked
            renderDOM(data)
          }
          checkAll()
        }
      })
    }
    function checkAll() {
      var getcheckAll = document.querySelector("#checkAll")
      getcheckAll.onclick = function () {
        data.forEach(function (item) {
          item.checked = getcheckAll.checked
          console.log(data)
          renderDOM(data)
        })
      }
      var res = data.every(function (item) {
        return item.checked
      })
      getcheckAll.checked = res
      var remove = document.querySelector("#remove")
      remove.onclick = function () {
        var str = data.filter(function (item, key) {
          return !item.checked
        })
        data = str
        renderDOM(data)
      }
      var info = document.querySelector("#newInfo")
      var getadd = document.querySelector("#add")
      getadd.onclick = function () {
        var value = info.value
        var obj = {
          id: data.length,
          title: value,
          checked: false,
          collect: false
        }
        data.push(obj)
        renderDOM(data)
      }
    }
    checkAll()

        // 1.按照数据渲染 音乐列表 2.全选 全不选 ：注意联动  3.删除 ：（删除每一项 、删除选中的音乐）4.添加功能
        // 5.收藏和取消收藏功能
        // 先修改数据在渲染视图；

  </script>
</body>

</html>